<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			*{
				margin: 0px;
				padding: 0px;
			}
			.cc{
				width: 1300px;
				height: 420px;
				margin: 0px auto;
			}
			.box{
				width: 296px;
				height: 420px;
				float: left;
				position:relative;
				border: 2px solid red;
				margin-right: 10px;
				overflow: hidden;
			}
			.box .imgbox{
				width:1184px ;
				height: 420px;
				position: absolute;
			}
			.box .imgbox img{
				float: left;
				width: 296px;
				height: 420px;
			}
			.box ul {
				width: 100%;
				height: 20px;
				position: absolute;
				bottom: 10px;
				text-align: center;
			}
			.box ul li{
				width: 20px;
				height: 20px;
				display: inline-block;
				margin-right: 10px;
				border-radius: 50%;
				list-style: none;
				background: grey;
			}
			.active{
				background: red !important;
			}
			.box .btn{
				display: block;
				width: 30px;
				height: 60px;
				position: absolute;
				top: 50%;
				margin-top: -30px;
				background: rgba(0,0,0,0.5);
				color: #fff;
				text-decoration: none;
				z-index: 99;
				line-height: 60px;
				text-align: center;
				font-size: 24px;
				
			}
			.box .l{
				left: 0px;
			}
			.box .r{
				right: 0px;
			}
		</style>
		<script type="text/javascript">
			$(function(){
				$('.box').each(function(){
//					获取原生js对象 因为只有原生js里面才能存对象属性
					var js = $(this)[0]
////					给每个box里面存入num
					js.num = 0
				})

				$('.l').click(function(){
//					获得box的原生js对象
					var jsBox = $(this).parents('.box')[0]
					jsBox.num--;
					if(jsBox.num<0){
						jsBox.num=0;
					}
					$(this).siblings('.imgbox').animate({'left':-jsBox.num*296+'px'},300)
					$(this).siblings('ul').find('li').eq(jsBox.num).addClass('active').siblings().removeClass('active')
				})
				$('.r').click(function(){
					//					获得box的原生js对象
					var jsBox = $(this).parents('.box')[0]
					var imgLen = $(this).siblings('.imgbox').find('img').length;
					jsBox.num++;
					if(jsBox.num>imgLen-1){
						jsBox.num=imgLen-1;
					}
					$(this).siblings('.imgbox').animate({'left':-jsBox.num*296+'px'},300)
					$(this).siblings('ul').find('li').eq(jsBox.num).addClass('active').siblings().removeClass('active')
				})
				$('ul li').click(function(){
					var jsBox = $(this).parents('.box')[0];
//					获得当前元素序号
						jsBox.num = $(this).index();
						$(this).parent().siblings('.imgbox').animate({'left':-jsBox.num*296+'px'},300)
					$(this).addClass('active').siblings().removeClass('active')
				})
				
				
				
			})
		</script>
	</head>
	<body>
		<div class="cc">
			<div class="box">
				<a href="javascript:;" class="l btn"> < </a>
				<a href="javascript:;" class="r btn"> > </a>
				<div class="imgbox">
					<img src="img/m1.png"/>
					<img src="img/m2.png"/>
					<img src="img/m3.png"/>
				</div>
				<ul>
					<li class="active"></li>
					<li></li>
					<li></li>
				</ul>
			</div>
			<div class="box">
				<a href="javascript:;" class="l btn"> < </a>
				<a href="javascript:;" class="r btn"> > </a>
				<div class="imgbox">
					<img src="img/m1.png"/>
					<img src="img/m2.png"/>
					<img src="img/m3.png"/>
					<img src="img/m4.png"/>
				</div>
				<ul>
					<li class="active"></li>
					<li></li>
					<li></li>
					<li></li>
				</ul>
			</div>
			<div class="box">
				<a href="javascript:;" class="l btn"> < </a>
				<a href="javascript:;" class="r btn"> > </a>
				<div class="imgbox">
					<img src="img/m1.png"/>
					<img src="img/m2.png"/>
					<img src="img/m3.png"/>
				</div>
				<ul>
					<li class="active"></li>
					<li></li>
					<li></li>
				</ul>
			</div>
			<div class="box">
				<a href="javascript:;" class="l btn"> < </a>
				<a href="javascript:;" class="r btn"> > </a>
				<div class="imgbox">
					<img src="img/m1.png"/>
					<img src="img/m2.png"/>
					<img src="img/m3.png"/>
					<img src="img/m4.png"/>
				</div>
				<ul>
					<li class="active"></li>
					<li></li>
					<li></li>
					<li></li>
				</ul>
			</div>
		</div>
		
		
	</body>
</html>
